import React, { useState } from 'react';
import { Button, Space, Table, Tag, Switch, Modal, message, Popconfirm } from 'antd';
import type { TableProps, PopconfirmProps } from 'antd';
import type { shopTS, typeTS } from '../../store/crmsTS';
import { useAppDispatch, useAppSelector } from '../../store/reactreduxts';
import Myfrom from './Myfrom';
import reducer, { async_delShoplist } from '../../store/crmsSlice';


const ShopList: React.FC = () => {

  //获取数据
  let obj = useAppSelector(state => state.crms1)
  let dispatch = useAppDispatch()

  //控制兑换框的显示隐藏
  const [isModalOpen, setIsModalOpen] = useState(false);
  //显示
  const showModal = () => {
    setIsModalOpen(true);
  };
  //隐藏
  const handleOk = () => {
    setIsModalOpen(false);
  };
  //X号按钮的隐藏
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  //控制标题的显示
  let [title, setTitle] = useState('')
  //添加={} 编辑={...}
  let [itemobj, setItemobj] = useState({})

  //表头
  const columns: TableProps<shopTS>['columns'] = [
    {
      title: '商品名称',
      dataIndex: 'title',
    },
    {
      title: '商品类型',
      dataIndex: 'typeId',
      render: (typeId) => {
        return obj.typelist.map(item => {
          if (item.typeId == typeId) {
            return item.label
          }
        })
      }
    },
    {
      title: '商品价格',
      dataIndex: 'price',
    },
    {
      title: '商品状态',
      dataIndex: 'Collect',
      render: (Collect) => {
        return <Switch checked={Collect} onChange={() => { }} />
      }
    },
    {
      title: '商品规格',
      dataIndex: 'specification',
      render: (specification) => {
        return specification.map((item: string) => {
          return <Tag key={item} color='green'>{item}</Tag>
        })
      }
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Button onClick={() => {
            //1.对话框显示
            showModal()
            //2.标题
            setTitle('编辑')
            //3.编辑={...}
            setItemobj(record)
          }}>编辑</Button>
          <Popconfirm
            title="提示"
            description="确定删除吗?"
            onConfirm={()=>{
              dispatch(async_delShoplist(record.id))
            }}
            okText="是"
            cancelText="否"
          >
            <Button danger>删除</Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];


  return <div>
    {/* 对话框 */}
    <>
      <Button type="primary" onClick={() => {
        //1.对话框显示
        showModal()
        //2.标题
        setTitle('添加')
        //3.添加={}
        setItemobj({})
      }}>
        添加
      </Button>
      <Modal
        title={title}
        closable={{ 'aria-label': 'Custom Close Button' }}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        footer={null}
      >
        {/* 表单组件 */}
        <Myfrom key={new Date().getTime()} title={title} onCancel={handleCancel}
          itemobj={itemobj}></Myfrom>
      </Modal>
    </>
    {/* 表格 */}
    <Table<shopTS> columns={columns} dataSource={obj.shoplist}
      rowKey={'id'} pagination={{ pageSize: 5 }} />

  </div>

};

export default ShopList;
